<template>
    <div>
        <div class="head-log">
        <img
          src="../assets/mylog.png"
          class="head-log-img"/>
      </div>

      <!-- 登陆账号信息部分 start -->
      <div class="myuser" style="">
        <el-dropdown :hide-on-click="false" style="margin-right: 10px">
          <span class="el-dropdown-link">
            <el-avatar>
              <i style="font-size: 30px; margin-left: 5px;" class="iconfont icon-w_xuexi"></i>
            </el-avatar>
            <div style="float: right; line-height: 44px; margin-left: 10px">
            {{account}}
            </div>
          </span>
          <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item disabled>
              <i class="iconfont icon-w_xuexi"></i>
              {{name}}</el-dropdown-item>
            <el-dropdown-item divided>
              <i class="iconfont icon-zhanghaoguanli"></i>
              个人信息</el-dropdown-item>
              <el-dropdown-item divided @click="loginOut">
                <i class="iconfont icon-zhuxiao"></i>退出</el-dropdown-item>

          </el-dropdown-menu>
        </template>
        </el-dropdown>
      </div>
    </div>
</template>

<script lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import myTokens from "../utils/auth"
import store from '@/store';
import { useCounterStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import type{ myHeadDto}from "@/dto/MyHeadDto"

export default defineComponent({
  setup() {
    const router= useRouter();
    const data=reactive<myHeadDto>({
        account:"",
        name:""
    });

    const events={
      loginOut:()=> {
        ElMessageBox.confirm('你确定要退出吗?', {confirmButtonText: '确认',cancelButtonText: '取消'})
      .then(() => {
      myTokens.removeToken();
      sessionStorage.removeItem("user");
       router.push("/login");
    })
    .catch(() => {})
    
    },
    };
    onMounted(()=>{
      // const user=JSON.parse(sessionStorage.getItem("user") as string);
      /**
       * Vuex使用方式
       */
      // const users= computed(()=>{
      //   return store.getters.getUsers.user;
      // })
  
      // data.uname=users.value.UName;
      // data.uaccount=users.value.UAccount;

      
      let stores= useCounterStore();
      let {getUser}=storeToRefs(stores);
      // console.log(getUser);
      data.name=getUser.value.name;
      data.account=getUser.value.account;
       
    })
    return{
      ...toRefs(data),
      ...events
    }
  },
})
</script>


<style scoped>
@import "../styles/layout.css";
</style>